import { computed } from "./reactivity/computed";
import { effect } from "./reactivity/effect";
import { reactive } from "./reactivity/ractive";
import { watch } from "./reactivity/watch";
import { ref } from "./reactivity/ref";

const app = document.querySelector('#app')



// 测试响应式数据=====================
// effect(()=> {
//     app!.innerHTML = aaa.name
// })

// 测试computed计算属性=============
// const aaa = computed(()=> {
//     // computed第一次不会触发而且只有数据变化时才会触发
//     console.log('computed');
//     app!.innerHTML = state.name + 'bbb';
//     return state.name + 'bbb';
// })

// // 所以打印只会触发两次 一次定时器修改
// console.log(aaa.value);

// setTimeout(() => {
//     state.name = 'ccc';
//     console.log(aaa.value);
// }, 2000)

// 测试watch函数================


// watch(state, (oldVal, newVal)=> {
//     console.log(newVal, oldVal);
// },{
//     immediate: true
// })
// setTimeout(()=> {
//     state.name = 'ccc'
// }, 2000)


// 测试ref函数================
const aaRef = ref<string>('aaa')

effect(() => {
    app!.innerHTML = aaRef.value
})

setTimeout(() => {
    aaRef.value = 'ccc'
}, 2000)
